<template>
  <div>
    <h1>HOME</h1>

  <div>
    <button @click="tonews">新闻</button>
    <button @click="tomusic">音乐</button>
    <button @click="togame">游戏</button>
  </div>
  <div>
    <button @click="tonewsR">新闻replace</button>
    <button @click="tomusicR">音乐replace</button>
    <button @click="togameR">游戏replace</button>
  </div>
  <div>
    <button @click="$router.go(-2)">回退n</button>
    <button @click="$router.back()">后退1</button>
    <button @click="$router.forward()">前进1</button>
  </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",

      //编程式路由导航中重复导航抛出错误的处理方式
      // 1. 因为push或者replace方法只书写第一个参数location的时候,则会返回promise实例,我们直接使用catch(()=>{})处理即可
      // 2. push或者replace可以接受第二个和第三个参数,都是回调函数,用来处理成功和失败

  methods: {
    tonews(){
      this.$router.push("/home/news")
    },
    tomusic(){
      this.$router.push({
        path:"/home/music"
      })
    },
    togame(){
      this.$router.push({
        name:"Game"
      })
    },

    tonewsR(){
      this.$router.replace("/home/news")
    },
    tomusicR(){
    this.$router.replace("/home/music")
        },
        togameR(){
    this.$router.replace("/home/game")
        }
  },
};
</script>

<style></style>
